<template>
  <el-popover :width="410" placement="bottom-start" ref="popover">
    <template #reference>
      <div id="bqan">
        <Icon type="md-happy" :size="25" />
      </div>
    </template>
    <div class="bq">
      <Tabs @on-click="dqTab" v-model="TabPaneTYpe">
        <TabPane v-for="(item, index) in ExpressionType" :key="index" :label="item" :name="item">
          <ul v-infinite-scroll="load" :infinite-scroll-immediate="false">
            <li v-for="item in ExpressionList" :key="item.id" @click="$emit('click-emoji', item)">
              <span v-if="item.type == 'emoji'">{{ item.tip }}</span>
              <Image v-else :src="item.file" fit="contain" width="40px" height="40px" lazy>
                <template #placeholder>
                  <div class="imgLoading"></div>
                </template>
              </Image>
            </li>
          </ul>
        </TabPane>
      </Tabs>
    </div>
  </el-popover>
</template>
<script setup>
  import api from '@/api/index';

  const popover = ref();

  //当前在哪个tab
  const TabPaneTYpe = ref(null);

  let pages = 0; //总页数
  let current = 3; //下拉页数
  function load() {
    if (current <= pages) {
      findExpressionAdd(TabPaneTYpe.value, current, 20);
      current++;
    }
  }
  onMounted(() => {
    findExpressionType();
  });

  //查询表情类型
  const ExpressionType = ref([]);
  const findExpressionType = () => {
    api.getFindExpressionType().then((res) => {
      if (res.code == 200) {
        ExpressionType.value = res.data;
        TabPaneTYpe.value = res.data[0];
        if (TabPaneTYpe.value == null) {
          findExpression(res.data[0], 1);
        } else {
          findExpression(TabPaneTYpe.value, 1);
        }
      }
    });
  };

  //查询表情列表
  const ExpressionList = ref([]);
  const findExpression = (type, pageNum) => {
    api
      .getFindExpression({
        type: type,
        pageNum: pageNum,
        pageSize: 20,
      })
      .then((res) => {
        if (res.code == 200) {
          ExpressionList.value = res.data.records;
          pages = res.data.pages;
        }
      });
  };

  //查询表情列表，添加新的
  const findExpressionAdd = (type, pageNum, pageSize) => {
    api
      .getFindExpression({
        type: type,
        pageNum: pageNum,
        pageSize: pageSize,
      })
      .then((res) => {
        if (res.code == 200) {
          ExpressionList.value = ExpressionList.value.concat(res.data.records);
          pages = res.data.pages;
        }
      });
  };

  //表情导航点击时
  const dqTab = (name) => {
    current = 3;
    TabPaneTYpe.value = name;
    findExpression(name, 1);
  };

  defineEmits(['click-emoji']);
</script>
<style scoped>
  #bqan {
    cursor: pointer;
  }

  .bq {
    background-color: #fff;
    padding: 10px;
    /* width: 400px; */
    /* height: 320px; */
    /* box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2); */
    /* border-radius: 10px; */
  }

  ul {
    height: 230px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    overflow: auto;
  }

  ul::-webkit-scrollbar {
    display: none;
  }

  li {
    padding: 10px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    list-style: none;
  }

  li:hover {
    background-color: #ebebeb;
  }

  #bqScrool {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }

  @media (max-width: 500px) {
    .bq {
      width: 300px;
    }
  }
</style>
